<template>
	<div class="resource-modal">
		<el-dialog v-model="state.visible" draggable :close-on-click-modal="false" width="1200px">
			<template #header>
				<div style="color: #fff">数据源</div>
			</template>
		  <el-radio-group v-model="state.index" size="medium">
		    <el-radio-button v-for="(item, index) in state.list" :label="index">{{index+1}}</el-radio-button>
		  </el-radio-group>
			<el-card class="mb10">
				<div slot="header" class="card-title"><span>内容</span></div>
			  <div class="card-content">{{oItem.page_content || '无'}}</div>
			</el-card>
			<el-card class="mb10">
				<div slot="header" class="card-title"><span>元数据_来源</span></div>
			  <div class="card-content">{{oItem.metadata?.source || '无'}}</div>
			</el-card>
			<el-card class="mb10">
				<div slot="header" class="card-title"><span>元数据_标题</span></div>
			  <div class="card-content">{{oItem.metadata?.title || '无'}}</div>
			</el-card>
			<el-card>
				<div slot="header" class="card-title"><span>元数据_语言</span></div>
			  <div class="card-content">{{oItem.metadata?.language || '无'}}</div>
			</el-card>
			
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';

const state = reactive({
	visible: false,
	index: 0,
	list: []
});

const oItem = computed(() => {
	if(!state.list.length) {
		return {}
	} else {
		return state.list[state.index]
	}
})

onMounted(async () => {
	
});

// 打开弹窗
const open = (list) => {
	state.index = 0;
	try {
		state.list = list ? JSON.parse(list) : [];
	} catch(err) {
		state.list = [];
	}
	
	state.visible = true;
};

// 关闭弹窗
const closeDialog = () => {
	emits('reload');
	state.visible = false;
};

// 取消
const cancel = () => {
	state.visible = false;
};

// 改变
const handleClick = () => {

}

// 导出对象
defineExpose({ open });
</script>
<style lang="scss" scoped>
.card-title {
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #dfdfdf;
}
.card-content {
	padding-top: 5px;
	max-height: 200px;
	overflow: auto;
}
</style>
